<template>
<div class="container">
  <div class="container-item" v-for="(item, index) in selectOption" :key="index" @click="goTo(item.url)">
    <img v-if="index!==1" class="container-img" :src="selectIndex === index ? item.use: item.img" alt="">
    <img v-else style="width: 12vw; color:black" class="container-img" :src="selectIndex === index ? item.use: item.img" alt="">
    <span v-if="selectIndex===index" style="color:#477fec">{{ item.title }}</span>
    <span v-else>{{ item.title }}</span>
  </div>
</div>
</template>

<script>
export default {
  name: 'bottom',
  props: [
    'selectIndex'
  ],
  data () {
    return {
      selectOption: [
        {
          img: require('../assets/svg/index-copy.svg'),
          title: '首页',
          use: require('../assets/svg/index-copy-copy.svg'),
          url: 'index'
        }, {
          img: require('../assets/svg/jiaoyu.svg'),
          title: '学校',
          use: require('../assets/svg/jiaoyu-copy.svg'),
          url: 'school'
        }, {
          img: require('../assets/svg/xiaoxi.svg'),
          title: '消息',
          use: require('../assets/svg/xiaoxi-copy.svg'),
          url: 'message'
        }
      ]
    }
  },
  methods: {
    goTo (url) {
      this.$router.push(url)
    }
  }
}
</script>

<style lang="stylus" scoped>
.container
  width: 100vw
  height:8vh
  background: white
  position:fixed
  bottom 0
  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  display: flex
  justify-content space-around
  align-items center
.container-item
  display flex
  flex-direction column
  justify-content center
  align-items center
.container-img
  width: 6vw
  color:black
  height 4vh
  margin-bottom: 0.6vh
</style>
